import React, { Component } from 'react'
// 导入子组件
import Fni from './test'

// 函数组件
const Fnc = () => {
  // js逻辑
  const handlerClick = (e, o) => {
    console.log(2222, e.target, o)
  }
  // 模版
  return (
    <div>
      <h2>我是函数组件</h2>
      <button onClick={(e) => {
        handlerClick(e, 123)
      }}>click</button>
    </div>
  )
}

// 类组件=>父组件
class Index extends Component {

  // js逻辑

  abc = 100

  // 事件处理函数
  handlerClick (e, a, b) {
    console.log(e, a, b)
  }

  // 获取焦点事件处理函数=> 箭头函数书写时就确定了this=》不能被改变
  handlerFocus = (ev) => {
    console.log('获取焦点！', ev.target, this)
  }

  // 阻止a标签跳转
  handlerPush (e) {
    console.log(e)
    e.preventDefault()
    // return false
  }

  handlerClc (e) {
    // 获取不到this!!!
    console.log(e, this, this.abc)
  }


  // 模版
  render () {
    console.log('组件实例：', this)
    return (
      <div>
        <h1>事件绑定</h1>
        <a onClick={this.handlerPush} href="http://itheima.com">黑马</a>
        <input onFocus={this.handlerFocus} type="text" />
        <button onClick={this.handlerClc.bind(this)}>点击2</button>
        <button onClick={(e) => {
          console.log(e)
          // 接收实参=>函数套函数
          this.handlerClick(e, 10000, 2000)
        }}>点击</button>
        <hr />
        <Fnc />
        <hr />
        <Fni />
      </div>
    )
  }
}

export default Index